<template>
  <div class="container">
    <!-- 头部 -->
    <div class="header">
      <span>说明：目前支持学科和关键字条件筛选</span>
      <el-button
        type="success"
        icon="el-icon-edit"
        size="small"
        @click="$router.push('new')"
        >新增试题</el-button
      >
    </div>
    <!-- 表单 -->
    <el-form
      ref="form"
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      size="small"
      label-width="79px"
    >
      <el-form-item label="学科">
        <el-select placeholder="请选择" v-model="formInline.subject">
          <el-option
            :label="item.subjectName"
            :value="item.subjectName"
            v-for="item in subjectsList"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级目录">
        <el-select placeholder="请选择" v-model="formInline.simple">
          <el-option
            :label="item.label"
            :value="item.value"
            v-for="item in simpleList"
            :key="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="标签">
        <el-select placeholder="请选择" v-model="formInline.bq">
          <el-option label="区域一" value="请选择"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="关键字">
        <el-input
          size="medium"
          v-model="formInline.key"
          placeholder="根据题干搜索"
        ></el-input>
      </el-form-item>
      <el-form-item label="试题类型">
        <el-select placeholder="请选择" v-model="formInline.questionType">
          <el-option
            :label="item.label"
            :value="item.value"
            v-for="(item, index) in questionType"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="难度">
        <el-select placeholder="请选择" v-model="formInline.difficulty">
          <el-option
            :label="item.label"
            :value="item.value"
            v-for="(item, index) in difficulty"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="方向">
        <el-select placeholder="请选择" v-model="formInline.direction">
          <el-option
            :label="item"
            :value="item"
            v-for="(item, index) in direction"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="录入人">
        <el-select placeholder="请选择" v-model="formInline.entering">
          <el-option
            :label="item.label"
            :value="item.value"
            v-for="(item, index) in entering"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="题目备注">
        <el-input size="medium"></el-input>
      </el-form-item>
      <el-form-item label="企业简称">
        <el-input size="medium"></el-input>
      </el-form-item>
      <el-form-item label="城市">
        <el-select
          placeholder="请选择"
          style="width: 100px"
          v-model="formInline.city"
          @change="changeCity"
        >
          <el-option
            :label="item"
            :value="item"
            v-for="(item, index) in cityList"
            :key="index"
          ></el-option>
        </el-select>
        <el-select
          placeholder="请选择"
          style="width: 100px; margin-left: 10px"
          v-model="formInline.area"
          @change="changeArea"
        >
          <el-option
            :label="item"
            :value="item"
            v-for="(item, index) in areaList"
            :key="index"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item style="margin-left: 160px">
        <el-button @click="clear">清除</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">搜索</el-button>
      </el-form-item>
    </el-form>

    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <!-- 全部 -->
      <el-tab-pane label="全部" name="first"></el-tab-pane>
      <!-- 待审核 -->
      <el-tab-pane label="待审核" name="second"></el-tab-pane>
      <!-- 已审核 -->
      <el-tab-pane label="已审核" name="third"></el-tab-pane>
      <!-- 已拒绝 -->
      <el-tab-pane label="已拒绝" name="fourth"></el-tab-pane>
    </el-tabs>
    <!-- 数据总计 -->
    <el-alert :title="cTtitle" type="info" :closable="false" show-icon>
    </el-alert>
    <!-- 表格整体 -->
    <el-table
      :data="choiceList"
      border
      style="width: 100%"
      @cell-click="goclick"
    >
      <el-table-column prop="number" label="试题编号" width="130">
      </el-table-column>
      <el-table-column prop="subject" label="学科" width="60">
      </el-table-column>
      <el-table-column prop="catalog" label="目录" width="90">
      </el-table-column>
      <el-table-column label="题型" width="120">
        <template #default="{ row }">
          <div v-if="row.questionType === '1'">单选</div>
          <div v-else-if="row.questionType === '2'">多选</div>
          <div v-else-if="row.questionType === '3'">简答</div>
        </template>
      </el-table-column>
      <el-table-column prop="remarks" label="题干" width="100">
      </el-table-column>
      <el-table-column prop="addDate" label="录入时间" width="200">
      </el-table-column>
      <el-table-column label="难度" width="100">
        <template #default="{ row }">
          <div v-if="row.difficulty === '1'">简单</div>
          <div v-else-if="row.difficulty === '2'">一般</div>
          <div v-else-if="row.difficulty === '3'">困难</div>
        </template>
      </el-table-column>

      <el-table-column prop="creator" label="录入人" width="100">
      </el-table-column>

      <el-table-column label="审核状态" width="100">
        <template #default="{ row }">
          <div v-if="row.chkState === 1">待审核</div>
          <div v-else-if="row.chkState === 2">通过</div>
          <div v-else-if="row.chkState === 3">拒绝</div>
        </template>
      </el-table-column>

      <el-table-column prop="chkRemarks" label="审核意见" width="100">
      </el-table-column>
      <el-table-column prop="chkUser" label="审核人" width="100">
      </el-table-column>

      <el-table-column label="发布状态" width="100">
        <template #default="{ row }">
          <div v-if="row.publishState === 1">待发布</div>
          <div v-else-if="row.publishState === 2">已发布</div>
          <div v-else-if="row.publishState === 3">已下架</div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="200">
        <template #default="{ row }">
          <!-- 弹框 -->
          <el-dialog
            append-to-body
            :title="dialogTitle"
            :visible.sync="dialogVisible"
            width="30%"
          >
            <el-radio-group v-model="radio">
              <el-radio :label="1">通过</el-radio>
              <el-radio :label="2">拒绝</el-radio>
            </el-radio-group>
            <el-input
              style="margin-top: 20px"
              type="textarea"
              :rows="2"
              placeholder="请输入审核意见"
              v-model="textarea"
            >
            </el-input>
            <span slot="footer" class="dialog-footer">
              <el-button @click="close">取 消</el-button>
              <el-button type="primary" @click="btnOk()">确 定</el-button>
            </span>
          </el-dialog>
          <el-button @click="look(row)" type="text" size="small"
            >预览</el-button
          >
          <el-button
            type="text"
            size="small"
            :disabled="row.chkRemarks ? true : false"
            @click="audit"
            >审核</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="edit(row.id)"
            :disabled="row.chkUser ? true : false"
            >修改</el-button
          >
          <el-button type="text" size="small" @click="hand(row, 'publish')">{{
            row.publishState !== 2 ? "上架" : "下架"
          }}</el-button>
          <el-button
            type="text"
            size="small"
            @click="hand(row, 'del')"
            :disabled="row.publishState === 2"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页功能 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      background
      layout="prev,  pager, next,sizes, jumper"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="5"
      :current-page="page"
      :total="+count"
    >
    </el-pagination>
    <el-dialog title="预览题目" :visible.sync="isShow" width="80%">
      <div class="dialogMainItems">
        <span class="dialogItem">【题型】：单选题</span>
        <span class="dialogItem">【编号】：21</span>
        <span class="dialogItem">【难度】：困难</span>
        <span class="dialogItem"
          >【标签】：用于布局的容器组件，方便快速搭建页面的基本结构</span
        >
        <span class="dialogItem">【学科】：前端</span>
        <span class="dialogItem">【目录】：js基础</span>
        <span class="dialogItem">【方向】：企业服务</span>
      </div>
      <el-divider></el-divider>
      <span>【题干】：</span><br />
      <span>选项：（以下选中的选项为正确答案）</span>
      <p style="color: blur">下面声明变量语句不正确的是？</p>
      <el-radio-group v-model="audio">
        <el-radio :label="1">var a = 10</el-radio>
        <el-radio :label="2">let b = 20</el-radio>
        <el-radio :label="3">const c = 30</el-radio>
        <el-radio :label="4">int a = 20</el-radio>
      </el-radio-group>
      <el-divider></el-divider>
      <span>【参考答案】：</span>
      <el-button type="danger">视频答案预览</el-button>
      <el-divider></el-divider>
      <span>【答案解析】：用于布局容器组件，方便快速搭建页面的基本结构</span>
      <el-divider></el-divider>
      <span>【题目备注】：用于布局容器组件，方便快速搭建页面的基本结构</span>
      <div class="dialogFooter">
        <el-button type="primary" @click="isShow = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { simple } from '@/api/hmmm/directorys'
import { provinces, citys } from '@/api/hmmm/citys'
import { list } from '@/api/hmmm/subjects'
import {
  remove,
  choice,
  choicePublish,
  choiceCheck
} from '@/api/hmmm/questions'
import {
  difficulty,
  questionType,
  direction,
  entering
} from '@/api/hmmm/constants'
export default {
  data () {
    return {
      audio: '',
      isShow: false,
      textarea: '',
      radio: 1,
      dialogTitle: '标题',
      dialogVisible: false,
      activeName: 'first',
      formInline: {
        subject: '',
        simple: '',
        bq: '',
        questionType: [],
        difficulty: [],
        direction: [],
        entering: [],
        city: '',
        area: '',
        publishState: '',
        key: ''
      },
      subjectsList: [],
      simpleList: [],
      choiceList: [],
      cityList: [],
      areaList: [],
      page: 1,
      pagesize: 5,
      count: '',
      auditData: {}
    }
  },
  async created () {
    this.difficulty = difficulty
    this.questionType = questionType
    this.direction = direction
    this.entering = entering
    this.cityList = provinces()
    console.log(citys())
    this.getChoice()
    this.getSubject()
    const res = await simple()
    console.log(res)
    this.simpleList = res.data
  },
  methods: {
    edit (id) {
      this.$router.push(
        { path: '/questions/new', query: { id: id } }
      )
    },
    // 搜索
    async search () {
      console.log(this.formInline.key)
      const res = await choice({
        page: this.page,
        pagesize: this.pagesize,

        // subjectID: this.formInline.subject,
        keyword: this.formInline.key
      })
      console.log(res)
      this.choiceList = res.data.items
      this.count = res.data.counts
    },
    goclick (row, column, event, cell) {
      this.auditData = row
    },
    // 审核
    audit () {
      this.dialogVisible = true
      this.dialogTitle = '题目审核'
    },
    async btnOk () {
      this.auditData.chkState = this.radio
      this.auditData.chkRemarks = this.textarea
      await choiceCheck(this.auditData)
      this.dialogVisible = false
      this.radio = 1
      this.textarea = ''
      this.getChoice()
    },
    close () {
      this.dialogVisible = false
      this.radio = 1
      this.textarea = ''
    },
    // 预览
    look (obj) {
      this.isShow = true
      this.dialogTitle = '题目预览'
    },
    // 切换城市，获取区
    async changeCity () {
      this.formInline.area = ''
      // this.areaList = {}
      const area = await citys(this.formInline.city)
      this.areaList = area
      // console.log(this.areaList)
    },
    changeArea () {
      // this.formInline.area = ''
    },
    clear () {
      this.formInline = {
        subject: '',
        simple: '',
        bq: '',
        questionType: [],
        difficulty: [],
        direction: [],
        entering: [],
        city: '',
        area: '',
        publishState: ''
      }
    },
    hand (obj, type) {
      // 删除
      if (type === 'del') {
        this.$confirm('此操作将永久删除该该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async () => {
            await remove(obj)
            this.getChoice()
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      }
      // 审核
      // if (type === 'audit') {
      //   this.dialogVisible = true
      //   this.dialogTitle = '题目审核'
      // }
      // 上下架
      if (type === 'publish') {
        let title = ''
        if (obj.publishState === 2) {
          title = '下架'
        } else {
          title = '上架'
        }
        this.$confirm(`你确定${title}这道题目吗?`, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await choicePublish(obj)
          this.choiceList.forEach((item) => {
            if (item.id === obj.id) {
              if (item.publishState === 2) {
                item.publishState = 1
              } else {
                item.publishState = 2
              }
            }
          })
          this.$message({
            type: 'success',
            message: `${title}成功!`
          })
        })
        choicePublish(obj).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
      }
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },
    // 点击导航栏，切换列表
    handleClick (tab, event) {
      console.log(tab.index)
      if (tab.index === '0') return this.getChoice()
      if (tab.index === '1') return this.getChoice(1)
      if (tab.index === '2') return this.getChoice(2)
      if (tab.index === '3') return this.getChoice(3)
    },
    // 点击切换页面
    handleCurrentChange (val) {
      // console.log(val)
      this.page = val
      this.getChoice()
    },
    handleSizeChange (val) {
      this.pagesize = val
      this.getChoice()
    },
    // 获取学科
    async getSubject () {
      const res = await list()
      console.log(res)
      this.subjectsList = res.data.items
    },
    // 获取题库列表
    async getChoice (id) {
      console.log(id)
      const res = await choice({
        page: this.page,
        pagesize: this.pagesize,
        chkState: id
      })
      console.log(res.data)
      this.choiceList = res.data.items
      this.count = res.data.counts
    }
    // 获取二级目录
  },
  computed: {
    cTtitle () {
      return '数据一共' + this.count + '条'
    }
  }
}
</script>
<style scoped lang='scss'>
.container {
  background-color: #fff;
  padding: 5px 20px;
  margin: 10px;
  border-radius: 3px;
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    span {
      font-size: 12px;
      color: pink;
    }
  }
  .el-pagination {
    text-align: right;
    margin-top: 20px;
  }
  .dialogMainItems {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    .dialogItem {
      width: 25%;
      height: 30px;
      line-height: 30px;
    }
  }
  .dialogFooter {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }
}
</style>
